<template>
    <div class="app-container">
        <div class="top-box clearfix">
            <div class="top-left clearfix">
                <el-select placeholder="选择菜单组" v-model="selectedMenuGroupId" @change="queryByGroup">
                    <el-option v-for="group in menuGroups" :label="group.name" :value="group.id" :key="group.id"></el-option>
                </el-select>
            </div>
            <div class="top-right clearfix">
            </div>
        </div>
        <table class="z-table"  style="width: 100%">
            <thead>
                <tr>
                    <th style="width: 200px"></th>
                    <th>ID</th>
                    <th>组ID</th>
                    <th>名称</th>
                    <th>父菜单ID</th>
                    <th>类型</th>
                    <th>URL</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="menu in menus">
                    <td>{{menu.tier|tierLines}}</td>
                    <td>{{menu.id}}</td>
                    <td>{{menu.groupId}}</td>
                    <td>{{menu.name}}</td>
                    <td>{{menu.parentId}}</td>
                    <td>{{menu.type}}</td>
                    <td>{{menu.url}}</td>
                    <td>
                        <a class="z-label success" @click="append(menu.groupId,menu.id)">append</a>
                        <a class="z-label danger" @click="remove(menu.id)">删除</a>
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import menuApi from '../../api/menu'
    import menuGroupApi from '../../api/menuGroup'
    import {Message} from 'element-ui'
    import '@/styles/form-box.css'

    export default {
        name: "menu-view",
        data:function () {
            return {
                menus:[],
                menuGroups:[],
                //被选中的菜单组
                selectedMenuGroupId:null,
            }
        },
        methods:{
            queryByGroup:function () {
                const _this = this;
                console.log(_this.selectedMenuGroupId)
                menuApi.findListByGroupId(_this.selectedMenuGroupId)
                    .then(function (data) {
                        if (data != null) {
                            _this.menus = data;
                            var menu = {
                                id:0,
                                name:'root',
                                groupId:_this.selectedMenuGroupId,
                                parentId:0,
                                tier:0
                            }
                            //添加根元素
                            _this.menus.splice(0,0,menu)
                        }
                    })
            },
            remove:function(id) {
                if (id > 0){
                    const _this = this;
                    menuApi.remove(id)
                        .then(function (data) {
                            if (data.success){
                                Message.success('删除成功')
                                _this.queryByGroup()
                                return
                            }
                            Message.error('删除失败')
                        }).catch(function () {
                        Message.error('删除失败')
                    })
                }

            },

            append:function (groupId,parentId) {
                this.$router.push('/setting/menu/add/'+groupId+'/'+parentId)
            }
        },
        filters:{
            tierLines:function(tier){
                if (tier == 0){
                    return 'ROOT'
                }
                console.log(tier)
                var line = '······'
                for(var i=1;i<tier;i++){
                    line+='······'
                }
                return line+"|"
            }
        },
        mounted:function () {
            const _this = this;
            menuGroupApi.findAll()
                .then(function (data) {
                    _this.menuGroups = data;
                    if (_this.menuGroups.length > 0) {
                        _this.selectedMenuGroupId = _this.menuGroups[0].id
                        _this.queryByGroup()
                    }
                })
        }
    }
</script>

<style scoped>

</style>
